import { StyleSheet, View, Image, Text, Pressable } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'
import Home from '../pages/home'
import Category from '../pages/category/category'
import Gouwuche from '../pages/gowuche'
import Mine from '../pages/mine'
import CateGoryDrawer from '../pages/category/categoryDrawer'
import { observer } from 'mobx-react-lite'
import { useStore } from '@/store'

const CategoryStack = createStackNavigator()

function CategoryScreen() {
  return (
    <CategoryStack.Navigator
      initialRouteName="CategoryIndex"
      screenOptions={{ headerShown: false }}
    >
      <CategoryStack.Screen name="CategoryIndex" component={Category} />
      <CategoryStack.Screen
        name="CateGoryDrawer"
        component={CateGoryDrawer}
        options={{
          cardStyle: { backgroundColor: 'transparent' },
          presentation: 'transparentModal',
          cardOverlayEnabled: true,
        }}
      />
    </CategoryStack.Navigator>
  )
}

const Tab = createBottomTabNavigator()

const footerList = [
  {
    iconFocus: require('../assets/icon/shouye.png'),
    icon: require('../assets/icon/shouye1.png'),
    txt: '首页',
    key: 'HomeIndex',
    component: Home,
  },
  {
    iconFocus: require('../assets/icon/gengduo.png'),
    icon: require('../assets/icon/gengduo1.png'),
    txt: '分类',
    key: 'Category',
    component: CategoryScreen,
  },
  {
    iconFocus: require('../assets/icon/gouwuche.png'),
    icon: require('../assets/icon/gouwuche1.png'),
    txt: '购物车',
    key: 'Cart',
    component: Gouwuche,
  },
  {
    iconFocus: require('../assets/icon/wode.png'),
    icon: require('../assets/icon/wode1.png'),
    txt: '我的',
    key: 'Mine',
    component: Mine,
  },
]
// 首页图标
const HomeIcon = observer(
  (props: { focused: boolean; icon: any; iconFocus: any }) => {
    const { HomeStore } = useStore()
    const { focused, icon, iconFocus } = props
    if (!focused) {
      return <Image source={icon} style={styles.icon} resizeMode="cover" />
    }
    return HomeStore.scrollTop > 800 ? (
      <View style={styles.roketBox}>
        <Text style={styles.roket}>&#xe600;</Text>
      </View>
    ) : (
      <Image
        source={focused ? iconFocus : icon}
        style={styles.icon}
        resizeMode="cover"
      />
    )
  },
)

export default observer(function TabFooter() {
  const { HomeStore } = useStore()
  return (
    <Tab.Navigator
      initialRouteName="HomeIndex"
      screenOptions={{
        tabBarActiveTintColor: '#fb969a',
        headerShown: false,
      }}
    >
      {footerList.map(item => (
        <Tab.Screen
          key={item.key}
          name={item.key}
          component={item.component}
          options={{
            tabBarLabel: route => (
              <Text
                style={StyleSheet.compose(styles.txt, {
                  color: route.focused ? '#f394a5' : '#666',
                })}
              >
                {item.txt}
              </Text>
            ),
            tabBarIcon: route =>
              item.key !== 'HomeIndex' ? (
                <Image
                  source={route.focused ? item.iconFocus : item.icon}
                  style={styles.icon}
                  resizeMode="cover"
                />
              ) : (
                <HomeIcon
                  focused={route.focused}
                  iconFocus={item.iconFocus}
                  icon={item.icon}
                />
              ),
            tabBarButton: (props: any) => (
              <Pressable
                {...props}
                onPress={() => {
                  HomeStore.homeListRef?.scrollToOffset({
                    animated: true,
                    offset: 0,
                  })
                  props.onPress()
                }}
              />
            ),
            tabBarLabelStyle: styles.txt,
          }}
        />
      ))}
    </Tab.Navigator>
  )
})
const styles = StyleSheet.create({
  icon: {
    width: 22,
    height: 22,
    marginTop: 2,
  },
  txt: {
    fontSize: 12,
  },
  roketBox: {
    width: 30,
    height: 30,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  roket: {
    fontFamily: 'iconfont',
    fontSize: 30,
    color: '#f394a5',
  },
})
